<template>
  <view>
    <view class="content" v-if="navigate==1">
      <view class="title">
        <image src="../../../static/money/one.png"></image>
        <view class="one">
          . . .
        </view>
        <view class="two" @click="backindexMore">
          X
        </view>
      </view>
      <view class="card">
        <view class="cardBackground">
          <image src="../../../static/life/background_06.png"></image>
          <view class="position">
            <view class="positionOnce">
              <view>
                <view class="money"><text>余额&nbsp;&nbsp;(元)</text>
                  <image src="../../../static/life/yj.png" mode="widthFix" v-show="!showImg" @click="changeImg()">
                  </image>
                  <image src="../../../static/life/by_03.png" mode="widthFix" v-show="showImg" @click="changeImg()">
                  </image>
                </view>
                <view class="star" v-show="t1">******</view>
                <view class="star" v-show="t2">12,346</view>
              </view>
              <!-- <button class="submit" @click="sub">点击登录</button> -->
              <view class="submit">
                <image src="../../../static/life/feng_03.png"></image>
              </view>
            </view>
            <view class="positionTwo">
              <view class="save" v-for="(item,index) in list" :key="index">
                <view class="saveOnce">{{item.starTake}}&nbsp;&nbsp;(元)</view>
                <view class="starOnce"><text v-show="t1" class="t1">*****</text><text class="star"
                    v-show="t2">125.6</text>
                  <image src="../../../static/life/jiantou_03.png"></image>
                </view>
                <view class="line">{{item.star}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="great">
        <view class="greatTitle">
          <image src="../../../static/life/line_03.png"></image>热门服务
        </view>
        <view class="greateWord">
          <view class="wordOne" v-for="(item,index) in greate" :key="index">
            <view>
              <image :src="item.img"></image>
            </view>
            <view>{{item.word}}</view>
          </view>
        </view>
      </view>
      <view class="city">
        <view class="greatTitle">
          <image src="../../../static/life/line_03.png"></image>城市服务
          <text>查看更多<text>>></text></text>
        </view>
        <view class="floot">
          <image src="../../../static/life/phone.png"></image>
        </view>
      </view>
    </view>
    <view class="tab">
      <view class="tabOne" @click="set(1)">
        <view @click="changeImg1()">
          <image v-show="!showImg1" src="../../../static/money/tab1.png"></image>
          <image v-show="showImg1" src="../../../static/life/selecttab1.png"></image>
          <view :class="[navigate==1?'tabOne1':'']">首页</view>
        </view>
      </view>
      <view class="tabTwo" @click="set(2)">
        <view @click="changeImg2()">
          <image v-show="!showImg2" src="../../../static/life/tab2.png"></image>
          <image v-show="showImg2" src="../../../static/life/selecttab2.png"></image>
          <view :class="[navigate==2?'tabOne1':'']">服务</view>
        </view>
      </view>
      <view class="tabThree" @click="set(3)">
        <view @click="changeImg3()">
          <image v-show="!showImg3" src="../../../static/money/user.png"></image>
          <image v-show="showImg3" src="../../../static/life/selecttab3_03.png"></image>
          <view :class="[navigate==3?'tabOne1':'']">我的</view>
        </view>
      </view>
    </view>
    <view class="navTwo" v-if="navigate==2">
      <view class="nav">
        <image src="../../../static/money/nav.png"></image>
        <view>服务</view>
      </view>
      <view class="list">
        <view class="greatTitle">
          <image src="../../../static/life/line_03.png"></image>城市服务
        </view>
        <view class="listOne">
          <view class="box" v-for="(item,index) in listOne" :key="index">
            <navigator open-type="navigate" :url='item.url'>
              <image :src="item.img" mode="widthFix"></image>
              <view>{{item.word}}</view>
            </navigator>
          </view>
        </view>
        <view class="listOne2">
          <view class="box" v-for="(item,index) in listOne2" :key="index">
            <image :src="item.img" mode="widthFix"></image>
            <view>{{item.word}}</view>
          </view>
        </view>
      </view>
      <view class="list">
        <view class="greatTitle">
          <image src="../../../static/life/line_03.png"></image>业务办理
        </view>
        <view class="listOne3">
          <view class="box" v-for="(item,index) in listOne3" :key="index">
            <image :src="item.img" mode="widthFix"></image>
            <view>{{item.word}}</view>
          </view>
        </view>
      </view>
      <view class="list">
        <view class="greatTitle">
          <image src="../../../static/life/line_03.png"></image>常用工具
        </view>
        <view class="listOne4">
          <view class="box" v-for="(item,index) in listOne4" :key="index">
            <image :src="item.img" mode="widthFix"></image>
            <view>{{item.word}}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="navThree" v-if='navigate==3'>
      <view class="navuser">
        <view class="navphone">
          <image src="../../../static/money/title3.png"></image>
        </view>
        <view class="account">我的账户</view>
      </view>
      <view class="navThreetwo">
        <view class="userSubmit2" @click="skip">
          <view class="userBox">
            <image class="img1" src="../../../static/life/nav3one.png"></image>
            <view class="userBoxone">
              <view class="userBoxonewordone">拉拉啦</view>
              <view class="userBoxonewordtwo"><text class="text1">账号：</text><text class="text2">202107040441</text>
              </view>
            </view>
            <image class="img2" src="../../../static/life/nav3two.png"></image>
          </view>
          <view class="userBoxonewordtwo"><text class="text1">缴存单位：</text><text class="text2">山东交通职业学院泰安校区</text></view>
          <view class="userBox2">
            <view class="usermoney" v-for="(item,index) in money" :key="index">
              <view class="money1">{{item.title1}}</view>
              <view class="money2">{{item.title2}}</view>
            </view>
          </view>
        </view>
        <view class="userlist">
          <view class="userlistone" v-for="(item,index) in user" :key="index">
            <image class="img" :src='item.img'></image>
            {{item.word}}
            <view class="jia">{{item.jia}}</view>
            <image class="img2" :src='item.img2'></image>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- <image src="../../../static/life/three1.png" mode=""></image> -->
</template>
<script>
  export default {
    data() {
      return {
        showImg1: true,
        showImg2: false,
        showImg3: false,
        navigate: 1,
        t1: true,
        t2: false,
        showImg: true,
        money: [{
            title1: '2,100.00',
            title2: '缴存基数',
          },
          {
            title1: '7 % / 7 %',
            title2: '个人/单位缴存比例',
          }
        ],
        user: [{
            img: '../../../static/money/three1.png',
            word: '更多账户',
            img2: '../../../static/money/nav3jiantou.png'
          },
          {
            img: '../../../static/money/nav2.png',
            word: '服务协议',
            img2: '../../../static/money/nav3jiantou.png'
          },
          {
            img: '../../../static/money/nav3.png',
            word: '设置',
            jia: '开启关爱版',
            img2: '../../../static/money/nav3jiantou.png'
          }
        ],
        listOne: [{
            img: '../../../static/money/navto1.png',
            word: '账户信息',
            url: '../money/userInfo'
          },
          {
            img: '../../../static/money/navto2.png',
            word: '存缴明细',
            url: '../money/houseDetail'
          },
          {
            img: '../../../static/money/navto3.png',
            word: '提取明细',
            url: '../money/houseDetail'
          }
        ],
        listOne4: [{
            img: '../../../static/money/navto9.png',
            word: '存款利率'
          },
          {
            img: '../../../static/money/navto10.png',
            word: '贷款利率'
          },
          {
            img: '../../../static/money/navto11.png',
            word: '房贷计算'
          }
        ],
        listOne3: [{
            img: '../../../static/money/navto7.png',
            word: '转移接续'
          },
          {
            img: '../../../static/money/navto8.png',
            word: '信息查询授权'
          },
        ],
        listOne2: [{
            img: '../../../static/money/navto4.png',
            word: '贷款信息'
          },
          {
            img: '../../../static/money/navto5.png',
            word: '还贷明细'
          },
          {
            img: '../../../static/money/navto6.png',
            word: '个税抵扣填报信息'
          }
        ],
        greate: [{
            img: '../../../static/money/icon1.png',
            word: '账户信息'
          },
          {
            img: '../../../static/money/icon2.png',
            word: '贷款信息'
          },
          {
            img: '../../../static/money/icon3.png',
            word: '个人抵扣填报信息'
          },
          {
            img: '../../../static/money/icon4.png',
            word: '转移接续'
          }
        ],
        list: [{
            starTake: '最近缴费',
            star: '2022-20-20 缴存'
          },
          {
            starTake: '最近提取',
            star: '无 提取'
          }
        ]
      }
    },
    methods: {
      backindexMore() {
        uni.navigateBack({
          delta: 1
        })
      },
      skip() {
        uni.navigateTo({
          url: '/pages/usermessage/usermessage'
        })
      },
      set(index) {
        this.navigate = index
      },
      changeImg() {
        this.showImg = !this.showImg
        this.t1 = !this.t1
        this.t2 = !this.t2
      },
      changeImg1() {
        this.showImg1 = true,
          this.showImg2 = false,
          this.showImg3 = false,
          this.showImg4 = false
      },
      changeImg2() {
        this.showImg1 = false,
          this.showImg2 = true,
          this.showImg3 = false,
          this.showImg4 = false
      },
      changeImg3() {
        this.showImg1 = false,
          this.showImg2 = false,
          this.showImg3 = true,
          this.showImg4 = false
      },
      sub() {
        uni.showModal({
          title: '温馨提示',
          showCancel: false,
          content: '未查询到您的账户信息，如您确实已缴存公积金，请联系缴存公积金中心处理',
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击确定');
            }
          }
        });
      }
    }
  }
</script>

<style>
  .content {
    padding: 90rpx 30rpx;
  }

  .starOnce .star {
    font-size: 34rpx;
    /* letter-spacing: 3.82rpx; */
    position: fixed;
  }

  .starOnce .t1 {
    font-size: 32rpx;
    letter-spacing: 5rpx;
    position: fixed;
  }

  .starOnce .t2 {
    font-size: 40rpx;
  }

  .title {
    display: flex;
  }

  .one {
    padding-left: 30rpx;
    font-size: 40rpx;
  }

  .two {
    font-size: 50rpx;
    padding-left: 30rpx;
    padding-top: 8rpx;
  }

  .title image {
    width: 70%;
    height: 90rpx;
    margin-bottom: 38rpx;
    position: relative;
  }

  .card .cardBackground {
    width: 100%;
    height: 360rpx;
    padding-top: 7rpx;
    padding: 10px 0rpx;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 70rpx;
  }

  .card image {
    width: 100%;
    height: 100%;
    /* border-radius: 10rpx; */
  }

  .position {
    padding: 40rpx;
    box-sizing: border-box;
    color: #fff;
    position: absolute;
    width: 100%;
    top: 15rpx;
  }

  .card .position .positionOnce {
    position: relative;
    height: 95rpx;
    display: flex;
    justify-content: space-between;
    position: relative;
    align-content: space-between;
    margin-bottom: 16rpx;
  }

  .card .position .positionOnce .star {
    letter-spacing: 2rpx;
    font-size: 50rpx;
    /* font-weight: bold; */
    position: absolute;
    /* bottom: 0.1rpx; */
    /* margin-top: 30rpx; */
    top: 45rpx;
  }

  .card .position .positionOnce .money {
    font-size: 25rpx;
  }



  .card .position .submit image {
    width: 90rpx;
    height: 30rpx;
  }

  .card .position .submit {
    letter-spacing: 2rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30rpx;
    position: absolute;
    bottom: 42rpx;
    right: 20rpx;
  }



  .card .position .positionTwo {
    width: 100%;
    display: flex;
    justify-content: start;
  }

  .card .position .positionTwo image {
    width: 20rpx;
    height: 30rpx;
    margin-left: 200rpx;
    /* position: relative; */
    /* left: 140rpx; */

  }

  .card .position .positionTwo .save {
    width: 100%;
  }

  .card .position .positionTwo .saveOnce {
    font-size: 25rpx;
    line-height: 60rpx;
    margin-bottom: 13rpx;
    margin-top: 15rpx;
  }

  .card .position .positionTwo .starOnce {
    letter-spacing: 1rpx;
    font-size: 28rpx;
    margin-bottom: 65rpx;

  }

  .card .position .positionOnce .money text {
    position: fixed;
  }

  .card image {
    position: absolute;
  }

  .card .position .positionOnce .money image {
    margin-left: 167rpx;
    margin-top: 3px;
    position: absolute;
    width: 43rpx;
    height: 24rpx;
  }

  .greatTitle {
    font-size: 32rpx;
    font-weight: bold;
    line-height: 80rpx;
  }

  .greatTitle image {
    width: 10rpx;
    height: 38rpx;
    vertical-align: -3px;
    margin-right: 16rpx;
  }

  .city .greatTitle image {
    width: 10rpx;
    height: 38rpx;
    vertical-align: -3px;
    margin-right: 16rpx;
  }

  .great .greateWord {
    padding: 20rpx 40rpx;
    display: flex;
    justify-content: space-between;
  }

  .great .greateWord .wordOne {
    /* border: 1px solid red; */
    width: 120rpx;
    text-align: center;
    font-size: 28rpx;
    margin-bottom: 15rpx;
  }

  .great .greateWord .wordOne image {
    width: 120rpx;
    height: 120rpx;
  }

  .city .greatTitle text {
    font-size: 28rpx;
    color: #365fae;
    position: absolute;
    right: 40rpx;
    letter-spacing: -2rpx;
  }

  .city .greatTitle text text {
    letter-spacing: -7rpx;
    position: absolute;
    right: -30rpx;
  }

  .city {
    position: relative;
  }

  .floot {
    width: 100%;
  }

  .floot image {
    width: 100%;
    height: 150rpx;
  }

  .tab {
    width: 100%;
    font-size: 24rpx;
    padding: 15rpx 0rpx;
    box-sizing: border-box;
    display: flex;
    background-color: #fff;
    justify-content: space-around;
    line-height: 35rpx;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #e1e1e1;
    z-index: 33;
  }

  .tab image {
    width: 45rpx;
    height: 50rpx;
  }

  .tab .tabOne,
  .tabTwo,
  .tabThree {
    color: #dcdcdc;
    text-align: center;
  }

  .tabThree:hover {
    color: #71bcff;
  }

  /* .tabOne:hover {
    color: #71bcff;
  } */
  .tabOne1 {
    color: #71bcff;
  }

  .tabTwo:hover {
    color: #71bcff;
  }

  .navTwo .nav {
    position: relative;
  }

  .navTwo .nav image {
    width: 100%;
    height: 190rpx;
  }

  .navTwo .nav view {
    position: absolute;
    top: 120rpx;
    left: 30rpx;
    font-size: 36rpx;
    color: #fff;
  }

  .list {
    padding: 10rpx 30rpx;

  }

  .list .greatTitle {
    /* font-weight: bold; */
    margin-bottom: 18rpx;
    font-size: 32rpx;
  }



  .listOne .box {
    width: 140rpx;
    text-align: center;
    margin-bottom: 60rpx;
    font-size: 28rpx;
  }

  .listOne .box image {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 10rpx;
  }

  .list .listOne {
    display: flex;
    justify-content: space-between;
    padding: 0rpx 30rpx;
  }

  .listOne2 .box {
    width: 140rpx;
    text-align: center;
    margin-bottom: 60rpx;
    font-size: 28rpx;
  }

  .listOne2 .box image {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 10rpx;
  }

  .list .listOne2 {
    display: flex;
    justify-content: space-between;
    padding: 0rpx 30rpx;
  }




  .listOne3 .box {
    /* width: 140rpx; */
    text-align: center;
    margin-bottom: 60rpx;
    margin-right: 115rpx;
    font-size: 28rpx;
  }

  .line {
    font-size: 22rpx;
    position: relative;
    top: 10rpx;
  }

  .listOne3 .box image {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 10rpx;
  }

  .list .listOne3 {
    display: flex;
    /* justify-content: space-between; */
    padding: 0rpx 30rpx;
  }

  .listOne4 .box {
    width: 140rpx;
    text-align: center;
    margin-bottom: 60rpx;
    font-size: 28rpx;
  }

  .listOne4 .box image {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 10rpx;
    font-size: 30rpx;
  }

  .list .listOne4 {
    display: flex;
    justify-content: space-between;
    padding: 0rpx 30rpx;
  }

  .navuser .navphone {
    width: 100%;
    position: relative;
  }

  .navuser .navphone image {
    width: 100%;
    height: 380rpx;
  }

  .navuser .account {
    position: absolute;
    top: 0;
    padding: 100rpx 30rpx;
    font-size: 36rpx;
    color: #fff;
    box-sizing: border-box;
  }

  .navThreetwo {
    padding: 0rpx 30rpx;
    box-sizing: border-box;
  }

  .navThreetwo .userSubmit {
    background-color: #fff;
    padding: 60rpx;
    text-align: center;
    border-radius: 10rpx;
    position: absolute;
    box-sizing: border-box;
    top: 190rpx;
    width: 92%;
    box-shadow: 0.3px 0.6px 6px #e1e1e1;
  }

  .navThreetwo .userSubmit2 {
    background-color: #fff;
    padding: 35rpx 100rpx 35rpx 30rpx;
    border-radius: 10rpx;
    position: absolute;
    box-sizing: border-box;
    top: 190rpx;
    width: 92%;
    box-shadow: 0.3px 0.6px 6px #e1e1e1;
  }

  .navThreetwo .userSubmit2 .userBox {
    display: flex;
  }

  .navThreetwo .userSubmit2 .userBox .userBoxone {
    margin-left: 40rpx;
  }

  .navThreetwo .userSubmit2 .userBox .userBoxone .userBoxonewordone {
    font-size: 38rpx;
    font-weight: bold;
    letter-spacing: 2rpx;
    margin-bottom: 20rpx;
  }

  .userBoxonewordtwo {
    margin-bottom: 26rpx;
    /* letter-spacing: 1rpx; */
  }

  .userBoxonewordtwo .text2 {
    font-size: 30rpx;
    color: #656565;
  }

  .userBoxonewordtwo .text1 {
    font-size: 28rpx;
    color: #aeaeae;
  }



  .userBox2 {
    display: flex;
    justify-content: space-between;
  }


  .navThreetwo .userSubmit2 .userBox .img1 {
    width: 110rpx;
    height: 110rpx;
  }

  .navThreetwo .userSubmit2 .userBox2 .money1 {
    margin-bottom: 20rpx;
    font-size: 36rpx;
    font-weight: bold;
  }

  .navThreetwo .userSubmit2 .userBox2 .money2 {
    font-size: 28rpx;
    color: #828282;
  }

  .navThreetwo .userSubmit2 .userBox .img2 {
    width: 200rpx;
    height: 60rpx;
  }

  .navThreetwo .userSubmit image {
    width: 70px;
    height: 70px;
    margin-bottom: 30rpx;
  }

  .navThreetwo .userSubmit button {
    border-radius: 60rpx;
    width: 400rpx;
    color: #fff;
    background-image: linear-gradient(to right, #0d47cd, #6b9cfb);
  }

  .userlist {
    position: absolute;
    top: 600rpx;
    width: 92%;
    font-size: 30rpx;
  }

  .userlist .userlistone {
    display: flex;
    line-height: 110rpx;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #d5d5d5;
  }

  .userlist .userlistone .img {
    width: 50rpx;
    height: 50rpx;
    margin-right: 20rpx;
  }

  .userlist .userlistone .img2 {
    width: 20rpx;
    height: 30rpx;
  }

  .img2 {
    position: absolute;
    right: 0;
  }

  .jia {
    position: absolute;
    right: 50rpx;
    font-size: 28rpx;
    color: #696969;
  }
</style>